<%@ include file="../../shared/standardDirectives.jspf"%>
<link href="/static/css/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="/javascript/thirdparty/jquery/jquery.tmpl.min.js"></script>
<script>
	var map;
	function getCenter(){
		alert(map.getCenter());
	}
	function initialize(){
		var center = new google.maps.LatLng(28.626796, 77.2188334);
		var mapOptions = {
				zoom: 11,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				center: center
		};
		
		map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
		//neighborhoods.push(new google.maps.LatLng(<c:out value="${path.location}"></c:out>));
		
	}
	$(document).ready(function(){
		initialize();
		setModeRoute("metro");
		setModeRoute("bus");
	});
	function setModeRoute(mode){
		$.ajax({
	      url: "/rest/static/route/"+mode+"/all",
	      dataType: "xml",
	      success: function(xml){
			$(xml).find("route").each(function(){
				setRoute(mode, $(this).find("code").text(),$(this).find("hex").text());
			});
			},	
	      failure: function(reponse){
	    	  alert(response);
	      },
	      complete: function(){
	    	  	  
	      },
	      cache :false
	    });
	}
	function setRoute(mode, code, color){
		var flightPlanCoordinates = [];
    	$.ajax({
	      url: "/rest/static/route/"+mode+"?routeCode="+code,
	      dataType: "xml",
	      success: function(xml){
			$(xml).find("stop").each(function(){
				var location = $(this).find("location");
				var latlng = new google.maps.LatLng($(location).find("latitude").text(), $(location).find("longitude").text());
				//var marker = new google.maps.Marker({
					//position: latlng, 
					//map: map, 
					//title:$(location).find("name").text()
				//});
				//google.maps.event.addListener(marker, 'click', toggleBounce(marker));
				flightPlanCoordinates.push(latlng);
			});
			},	
	      failure: function(reponse){
	    	  alert(response);
	      },
	      complete: function(){
	    	  var routePath = new google.maps.Polyline({
	  			path: flightPlanCoordinates,
	     			strokeColor: color,
	     			strokeOpacity: 1.0,
	     			strokeWeight: 4
	        	});
	    	  routePath.setMap(map);	  
	      },
	      cache :false
	    });
	}
	function toggleBounce(marker) {
	  if (marker.getAnimation() != null) {
	    marker.setAnimation(null);
	  } else {
	    marker.setAnimation(google.maps.Animation.BOUNCE);
	  }
	}
</script>
<div id="map_canvas" style="width: 100%; height: 600px;">map div</div>
<input type="button" value="Get Center" onclick="getCenter();">